<template>
  <div>
    <!-- 轮播图 -->
    <mt-swipe :auto="4000" :show-indicators="true">
      <!-- 用v-for循环data里的数据的src需要用require（）才能打包 -->
      <mt-swipe-item v-for="item in imgSrc" :key="item.src">
        <a href="#">
          <img :src="item.src" :alt="item.alt" :title="item.title">
        </a>
      </mt-swipe-item>
    </mt-swipe>

    <!-- 九宫格 -->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <!-- 点击进入新的组件，就要用 router-link 改造，改造后的 to 属性对应的路由 
          ——> 需要去router.js中注册，每个路由需要有对应的component匹配 <—— 创建component,import到router.js-->
          <router-link to="/home/shopping">
            <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
            <div class="mui-media-body">购物</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/news">
            <span class="mui-icon mui-icon-extra mui-icon-extra-find"></span>
            <div class="mui-media-body">新闻</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/gallery">
            <span class="mui-icon mui-icon-image"></span>
            <div class="mui-media-body">图吧</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/intro">
            <span class="mui-icon mui-icon-list"></span>
            <div class="mui-media-body">简历</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/history">
            <span class="mui-icon mui-icon-videocam"></span>
            <div class="mui-media-body">历史上的今天</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/poetry">
            <span class="mui-icon mui-icon-compose"></span>
            <div class="mui-media-body">藏头诗</div>
          </router-link>
        </li>
      </ul>
    </div>

    <div class="author">
      <p>name: boyd tang</p>
      <p>email: tangboyd@163.com</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "首页",
      imgSrc:[
        {
          src: require("../../static/images/nav1.jpg"),
          alt:"华农紫荆花",
          title:"华农紫荆花"
        },
        {
          src: require("../../static/images/nav2.jpg"),
          alt:"丽江泸沽湖",
          title:"丽江泸沽湖"
        },
        {
          src: require("../../static/images/nav3.jpg"),
          alt:"北京天坛",
          title:"天坛祈年殿"
        },
        {
          src: require("../../static/images/nav4.jpg"),
          alt:"玉龙雪山",
          title:"玉龙雪山"
        },
        {
          src: require("../../static/images/nav5.jpg"),
          alt:"西湖三潭印月",
          title:"西湖三潭印月"
        },
        {
          src: require("../../static/images/nav6.jpg"),
          alt:"苏州同里古镇",
          title:"苏州同里古镇"
        }
      ]
    }
  },
  created(){
    this.showTitle(this.title)
  },
  methods: {
    showTitle(title) {
      this.$emit("getTitle", title);
    }
  }
};
</script>

<style lang="scss" scoped>
// * {
//   // Unable to preventDefault inside passive event listener due to target being treated as passive.
//   // touch-action: pan-y;
// }

.mint-swipe {
  margin-top: 1px;
  height: 250px;
  .mint-swipe-items-wrap {
    border-radius: 10px;
    box-shadow: 1px 1px 10px #ccc;
    .mint-swipe-item {
      a {
        img {
          width: 100%;
          border-radius: 10px;
        }
      }
    }
  }
}

.mui-content {
  & > .mui-table-view {
    margin-top: 1px;
  }
  // 测试手机上不能滚动问题
  overflow-y: auto;
  .mui-grid-view.mui-grid-9 {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 15px #ccc;
    border: none;
    .mui-table-view-cell {
      border-bottom: 0;
      border-right: 0;
      span:before{
        color: #89c3eb
      }
    }
  }
}

.author{
  margin: 10px 20px;
  p{
    margin-bottom: 5px;
  }
}
</style>
